<template>
  <div id="CodeDeatilparam" v-if="Object.keys(Param).length !== 0">
      <table v-for="(table,index) in  Param.sizes" :key="index" class="info-size">
         <tr v-for="(tr,index) in table" :key="index">
             <td v-for="(td,index) in tr" :key="index">{{td}}</td>
         </tr>
      </table>
      <table class="info-param">
         <tr v-for="(item ,index) in Param.infos" :key="index">
             <td>{{item.key}}</td>
             <td>{{item.value}}</td>
         </tr>
      </table>
      <div class="info-img" v-if="Param.image.length !==0">
           <img :src="Param.image" alt=""/>
      </div>
      <div class="info-hint" v-else>
         <p>暂无图片~</p>
      </div>
  </div>
</template>
<script>
export default {
  name: 'CodeDeatilparam',
  props:{
    Param:{
       type:Object,
       default(){
         return {}
       }
    }
  },
  components: {  },
  directives: {  },
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>
<style scoped>
.info-size,.info-param{
  width:90%;
  margin:10px;
}
.info-size td,.info-param td{
  font-size: 12px;
  color: #000;
  text-align: center;
  padding: 5px 0;
  vertical-align: middle;
  border:1px solid #ccc;
}
.info-img{
  width: 100%;
  padding:0 10px;
  height: auto;
  display: block;
  margin: 10px auto 0;
}
.info-hint{
   font-size: 12px;
  color: #000;
  text-align: center;
}
</style>